{% extends "main.html" %}

{% block head %}
<script src="/javascript/jquery.elastic.js" type="text/javascript"></script>
<script src="/javascript/jquery.raty.min.js" type="text/javascript"></script>
{% endblock %}

{% block breadcrumb %}
<nav>
    <ul id="crumbs">
        <li><a href="/">{{ system_title }}</a></li>
        <li><a href="/feedback">{{ str.questionary }} 1/{{ count }}</a></li>
        <li>{{ questionary.questionary.name.translate }} "{{ questionary.course.subject.name.translate }}"</li>
    </ul>
</nav>
{% endblock %}

{% block content %}

<section id="wide_content">
    <form id="feedback_form" action="/feedback" method="post">
        <input type="hidden" name="person_questionary" value="{{ questionary.key }}"/>

    <div class="table" style="margin-bottom:20px; margin-top:10px;">
        <div class="table_row">
            <div class="header_cell">
                {{ questionary.questionary.name.translate }} <span style="color:#0099FF; text-transform:uppercase; letter-spacing:2px;">"{{ questionary.course.subject.name.translate }}"</span>
            </div>
        </div>
        <div class="table_row" style="width:100%">
            <div class="table_cell" style="width:100%">
                {{ questionary.questionary.description.translate|linebreaksbr }}
            </div>
        </div>
    </div>

    {% regroup questions|dictsort:"target_person" by target_person as grouped %}
	{% for group in grouped %}
    <div class="table" style="margin-bottom:20px; margin-top:10px;">
        <div class="table_row">
            <div class="header_cell">
                {% if group.grouper %}{{ group.grouper }}{% else %}{{ str.general_questions }}{% endif %}
            </div>
        </div>

        {% for item in group.list|dictsort:"ordinal" %}
        <div class="table_row" style="width:100%">
            <div class="table_cell" style="width:100%">
                {{ item.question }}{% if item.is_mandatory %} *{% endif %}
                {% ifequal item.type "like" %}
                <div style="float:right;">
                    <input type="hidden" name="{{ item.key }}" value="{{ item.answer|default:"0" }}"/>
                    <img class="unlike" src="/images/like/unlike-off.png" height="20" width="20" alt="0" />
                    <img class="like" src="/images/like/like-off.png" height="20" width="20" alt="0" />
                </div>
                {% endifequal %}
                {% ifequal item.type "rating" %}
                <div class="range" style="float:right;"><input type="hidden" class="range_input" name="{{ item.key }}" value="{{ item.answer|default:"0" }}"/></div>
                {% endifequal %}
                {% ifequal item.type "text" %}
                <br /><textarea name="{{ item.key }}" rows="1" style="width:99%; height:20px;">{{ item.answer|default:"" }}</textarea>
                {% endifequal %}
            </div>
        </div>
	   {% endfor %}
    </div>
	{% endfor %}

    </form>
    <a href="javascript:void(0);" id="feedback_submit" class="button" style="float:right;">{{ str.submit }}</a>
    <span style="float:left; font-style:italic; font-size:11px;">{{ str.mandatory_questions }}</span>
</section>

<script type="text/javascript">
    $(document).ready(function(){

        /* LIKE */
        $('.unlike').each(function(){
            set_like_img($(this).parent());
        });

        $('.like').css('cursor', 'pointer');
        $('.unlike').css('cursor', 'pointer');

        $('.unlike').click(function() {
            set_like($(this).parent(), 'unlike');
        });

        $('.like').click(function() {
            set_like($(this).parent(), 'like');
        });

        function set_like(div, button) {
            score = div.children('input').val()
            if((score === '0' || score === '1') && button === 'unlike') score = -1;
            if((score === '0' || score === '-1') && button === 'like') score = 1;
            if((score === '1') && button === 'like') score = 0;
            if((score === '-1') && button === 'unlike') score = 0;
            div.children('input').val(score);
            set_like_img(div);
        };

        function set_like_img(div) {
            score = div.children('input').val()
            div.children('.unlike').attr('src', '/images/like/unlike-off.png');
            div.children('.like').attr('src', '/images/like/like-off.png');
            if(score === '-1') div.children('.unlike').attr('src', '/images/like/unlike.png');
            if(score === '1') div.children('.like').attr('src', '/images/like/like.png');
        };


        /* RATING */
        $('.range').each(function(){
            rating = $(this);
            value = rating.children('input').val();
            rating.raty({
                number: 5,
                hintList: ['1', '2', '3', '4', '5'],
                cancelHint: '',
                path: '/images/rating/',
                showCancel: true,
                start: value,
                onClick: function(score) {
                    $(this).children('input').val(score);
                }
            });
        });


        /* TEXT */
        $('textarea').elastic();


        /* SUBMIT */
        $('#feedback_submit').click(function(){
            $('#feedback_form').submit();
        });

    });
</script>

{% endblock %}